前端关于Vue的面试题（一） |
您所在的位置：网站首页 › vue v-on可以监听多个方法吗 › 前端关于Vue的面试题（一） |
前端关于Vue的面试题（一）
|
1.vue组件传值几种方式
父组件通过prop向子组件传值 子组件通过this.$emit()触发父组组件传递过来的方法向父组件传值 兄弟组件之间不能直接传值，需要通过父组件来做间接传值，在这种情况下推荐使用vuex 中央事件总线 //Bus.$emit 发送消息 Bus.$emit('inceptMessage', this.msg) //Bus.$on 接收消息 Bus.$on('inceptMessage',(msg) => { this.fromComponentAMsg = msg })具体例子请看官方文档 2.vue-router原理说简单点，vue-router的原理就是监听URL地址变化，从而渲染不同的组件。 vue-router的模式主要有hash模式和history模式。 1.hash模式的原理(url带有#号部分)： 在vue-router.js的2.8版本之前，在路由的hash部分发生了任何变化，都会执行window.onhashchange方法，在这个方法内部我们可以根据当前匹配到的hash去加载对应的组件 在vue-router.js的2.8版本之后，内部使用window.history.pushState来完成相应的功能 hash模式的特点：在切换路由的时候，不会向服务器发送请求，但是刷新网页的时候， 此时会向服务器发送请求，在向服务器发送请求的时候，hash部分的信息是不会发送到服务器的， 所以此时刷新网页没有问题 2.history模式的原理(url中通过/表示路径) 内部使用window.history.pushState来处理url的变化，切换对应的组件 history模式的特点：在切换路由的时候，不会向服务器发送请求，但是当刷新网页的时候， 此时会向服务器发送请求，如果后端没有对应的接口与此匹配，此时会报资源找不到的错误 history模式一般情况下不能刷新网页 3.构建的 vue-cli 工程都到了哪些技术，它们的作用分别是什么？ 1、vue.js：vue-cli工程的核心，主要特点是双向数据绑定和组件系统。 2、vue-router：vue官方推荐使用的路由框架。 3、vuex：专为 Vue.js 应用项目开发的状态管理器，主要用于维护vue组件间共用的一些 变量 和 方法。 4、axios（ 或者 fetch 、ajax ）：用于发起 GET 、或 POST 等 http请求，基于 Promise 设计。 5、vux mint-UI AntDesign ElementUI等：为vue设计的UI组件库。 6、创建一个emit.js文件，用于vue事件机制的管理。 7、webpack：模块加载和vue-cli工程打包器。 8、AnimateCSS：动画库 4.vue.confog.js 的对于工程 开发环境 和 生产环境 的配置 configureWebpack: config => { // 开发环境配置 if (debug) { // cheap-module-eval-source-map是打包文件时最快的生成source map的方法，生成的Source Map 会和打包后的JavaScript文件同行显示，没有列映射 config.devtool = '#cheap-module-eval-source-map' } // 生产环境配置 else { //生成一个没有列信息（column-mappings）的SourceMaps文件，同时 loader 的 sourcemap 也被简化为只包含对应行的 config.devtool = 'cheap-module-source-map' } // 开发生产共同配置 Object.assign(config, { resolve: { alias: { '@': path.resolve(__dirname, './src'), 'vue$': 'vue/dist/vue.esm.js' } } }) }, 5.vue-cli 工程常用的 npm 命令有哪些？ npm install npm run dev npm run build npm run build --report 用于查看 vue-cli 生产环境部署资源文件大小 6.请说出vue-cli工程中每个文件夹和文件的用处
常用对象解析： scripts：npm run xxx 命令调用node执行的 .js 文件dependencies：生产环境依赖包的名称和版本号，即这些 依赖包 都会打包进 生产环境的JS文件里面devDependencies：开发环境依赖包的名称和版本号，即这些 依赖包 只用于 代码开发 的时候，不会打包进 生产环境js文件 里面 8.vue.js的核心1、数据驱动，也叫双向数据绑定。 Vue.js使用ES5的Object.defineProperty和存储器属性: getter和setter实现数据的监听(兼容IE9及以上版本)。核心是VM，即ViewModel，保证数据和视图的一致性。 2、组件系统。 .vue组件的核心选项: 1、模板（template）：模板声明了数据和最终展现给用户的DOM之间的映射关系。 2、初始数据（data）：一个组件的初始数据状态。对于可复用的组件来说，这通常是私有的状态。 3、接受的外部参数(props)：组件之间通过参数来进行数据的传递和共享。 4、方法（methods）：对数据的改动操作一般都在组件的方法内进行。 5、生命周期钩子函数（lifecycle hooks）：一个组件会触发多个生命周期钩子函数，最新2.0版本对于生命周期函数名称改动很大。 6、私有资源（directives、components、filters）：Vue.js当中将用户自定义的指令、过滤器、组件等统称为资源。一个组件可以声明自己的私有资源。私有资源只有该组件和它的子组件可以调用。 3、vuex。 vuex是是vue中的状态管理方案，主要用于多个组件之间的数据共享。 9.对于 Vue 是一套 构建用户界面 的 渐进式框架 的理解渐进式代表的含义是：没有多做职责之外的事。vue.js只提供了 vue-cli 生态中最核心的 组件系统 和 双向数据绑定。像vuex、vue-router都属于围绕 vue.js开发的库，可以集成也可以不集成。 比如说，你要使用Angular，必须接受以下东西： - 必须使用它的模块机制 - 必须使用它的依赖注入 - 必须使用它的特殊形式定义组件（这一点每个视图框架都有，难以避免） 所以Angular是带有比较强的排它性的，如果你的应用不是从头开始， 而是要不断考虑是否跟其他东西集成，这些主张会带来一些困扰。 比如说，你要使用React，你必须理解： - 函数式编程的理念 - 需要知道什么是副作用 - 什么是纯函数 - 如何隔离副作用 - 它的侵入性看似没有Angular那么强，主要因为它是软性侵入。 Vue与React、Angular的不同是，但它是渐进的： - 你可以在原有大系统的上面，把一两个组件改用它实现，当jQuery用 - 也可以整个用它全家桶开发，当Angular用； - 还可以只用它的视图，搭配你自己设计的整个下层应用。 - 你可以在底层数据逻辑的地方用oop(对象编程)，也可以函数式编程，都可以， 它只是个轻量视图而已，只做了最核心的东西。 10.请说出vue几种常用的指令 - v-if：根据表达式的值的真假条件渲染元素。在切换时元素及它的数据绑定 / 组件被销毁并重建。 - v-show：根据表达式之真假值，切换元素的 display CSS 属性。 - v-for：循环指令，基于一个数组或者对象渲染一个列表，vue 2.0以上必须需配合 key值 使用。 - v-bind：动态地绑定一个或多个特性，或一个组件 prop 到表达式。 - v-on：用于监听指定元素的DOM事件，比如点击事件。绑定事件监听器。 - v-model：实现表单输入和应用状态之间的双向绑定 - v-pre：跳过这个元素和它的子元素的编译过程。可以用来显示原始 Mustache 标签。跳过大量没有指令的节点会加快编译。 - v-once：只渲染元素和组件一次。随后的重新渲染，元素/组件及其所有的子节点将被视为静态内容并跳过。这可以用于优化更新性能。 - v-html: 显示html 11.请问 v-if 和 v-show 有什么区别 共同点： v-if 和 v-show 都是动态显示DOM元素。 区别： 1、编译过程： v-if 是 真正 的 条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。v-show 的元素始终会被渲染并保留在 DOM 中。v-show 只是简单地切换元素的 CSS 属性display。 2、编译条件： v-if 是惰性的：如果在初始渲染时条件为假，则什么也不做。直到条件第一次变为真时，才会开始渲染条件块。v-show不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。 3、性能消耗： v-if有更高的切换消耗。v-show有更高的初始渲染消耗。 4、应用场景： v-if适合运行时条件很少改变时使用。v-show适合频繁切换。 12.vue常用的修饰符 v-on 指令常用修饰符： - .stop - 调用 event.stopPropagation()，禁止事件冒泡。 - .prevent - 调用 event.preventDefault()，阻止事件默认行为。 - .capture - 添加事件侦听器时使用 capture 模式。 - .self - 只当事件是从侦听器绑定的元素本身触发时才触发回调。 - .{keyCode | keyAlias} - 只当事件是从特定键触发时才触发回调。 - .native - 监听组件根元素的原生事件。 - .once - 只触发一次回调。 - .left - (2.2.0) 只当点击鼠标左键时触发。 - .right - (2.2.0) 只当点击鼠标右键时触发。 - .middle - (2.2.0) 只当点击鼠标中键时触发。 //注意： 如果是在自己封装的组件或者是使用一些第三方的UI库时，会发现一些事件并不起效果， 这时就需要用.native修饰符了，如当我们使用element-ui中的el-input组件时的@keyup.enter事件： v-bind 指令常用修饰符： - .prop 被用于绑定 DOM 属性 (property)。(差别在哪里？) - .camel (2.1.0+) 将 kebab-case 特性名转换为 camelCase. (从 2.1.0 开始支持) - .sync (2.3.0+) 语法糖，会扩展成一个更新父组件绑定值的 v-on 侦听器。 v-model 指令常用修饰符： - .lazy 取代 input 监听 change 事件 - .number 输入字符串转为数字 - .trim 输入首尾空格过滤 13.v-on可以监听多个方法吗？ v-on可以监听多个方法，例如： 但是同一种事件类型的方法，只会响应第一个，例如下面只会响应methodsOne方法。 14.vue中 key 值的作用key值：用于 管理可复用的元素。因为Vue 会尽可能高效地渲染元素，通常会复用已有元素而不是从头开始渲染。这么做使 Vue 变得非常快，但是这样也不总是符合实际需求。 2.2.0+ 的版本里，当在组件中使用 v-for 时，key 现在是必须的，key的取值需要是number或者string，而且需要在同级唯一。 15.vue事件中如何使用event对象注意在事件中要使用 $ 符号 //html部分 event //js部分 showEvent(event){ //获取自定义data-id console.log(event.target.dataset.id) //阻止事件冒泡 event.stopPropagation(); //阻止默认 event.preventDefault() } 16.什么是$nextTick$nextTick 下一次dom更新完毕之后执行 因为Vue的异步更新队列，$nextTick是用来知道什么时候DOM更新完成的。 今天开始更新Vue的喽~说是面试题，其实也是自己在学习的过程中有问题的地方，或是概念不清的地方。 这些都是自己一点点整理出来的，花费了很长的时间，觉得对初学者还是很有用的，所以和大家一起分享下！ |
【本文地址】
今日新闻 |
推荐新闻 |